<template>
	<view class="body-class">
		<view class="img-div-class"><img class="img-class" :src="cddShop.spImg"></view>

		<view class="bq-class-div">
			<span class="zchong-class">直充</span>
			<span class="dy-class-wz">{{cddShop.spName}}</span>
			<p class="price-class">￥{{cddShop.spSellingPrice}}</p>
			<img class="img-bq-dec" src="http://888.fulunet.com/resources/img/service-img.2e736f18.png">
		</view>



		<!-- 商品选择 -->
		<view class="cu-bar bg-white margin-top">
			<view class="action">
				<text class="cuIcon-title text-orange "></text> 商品选择参数
			</view>
			<view class="action">
				<button class="cu-btn bg-green shadow" @tap="showModal" data-target="ChooseModal">商品规格</button>
			</view>
		</view>
		<view class="cu-modal bottom-modal" :class="modalName=='ChooseModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-bar bg-white">
					<view class="action text-blue" @tap="hideModal">关闭</view>
				</view>
				<view class="box-div">
					<view style="width: 100%;position: relative;">
						<view class="box-one">
							<img class="box-one-img" :src="cddShop.spImg">
							<view class="box-onm-right">
								<view class="box-one-peices">￥
									<text>{{cddShop.spSellingPrice}}</text>
								</view>
								<view class="box-onm-rigt-wz">
									<text class="box-one-text-wz">
										已选<text>
											{{cddShop.spName}},{{number}}个</text>
									</text>
								</view>
							</view>
						</view>
						<!-- 商品规格-->
						<view class="shop-div butom-ggcans">
							<span>商品规格参数</span>
							<view class="shop-nam-class"><text>{{cddShop.spName}}</text>
								<img class="img-shop"
									src="">
							</view>
						</view>

						<!-- 选择 数量 -->
						<view class="number-div">
							<spane>数量</spane>
							<text class="rigth">
								<view :class="`${number==1?'jie-class no':'jie-class '}`" @click="jief">
									<spne></spne>
								</view>
								<view class="nuber">
									{{number}}
								</view>
								<view :class="`${number==10?'jia-class no':'jia-class '}`" @click="jiaf">
									<text>+</text>
								</view>
							</text>
						</view>

						<!-- 底部按钮 -->
						<view class="dibu-class">
							<view class="dibu-class-left-button" @click="joingwc">加入购物车</view>
							<view class="dibu-class-right-button">立即购买</view>
						</view>
					</view>
				</view>
			</view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				number: 1,
				modalName: "ChooseModal",
				order: {
					orNumber: "",
					orSpName: "",
					orPhone: "",
					orStId: "",
					orPlayPrice: 0,
				},
					urId: sessionStorage.getItem("urId"),
				cddShop: {},
				url: this.$url + "/frontend",
				t: 0,
				price: 1,
				spId: 0,
				indexs: 0,
				img: "https://gitee.com/CodeLiQing/notes-collection/raw/master/%E4%B8%AA%E4%BA%BA%E7%AE%80%E5%8E%86/6a83bc86-bc05-483b-99c2-8aea5eb9bd27.png",
				title: 'Hello',
				prices: [1, 5, 10, 100, 500, 1000, 5000, 10000, 50000]
			}
		},

		created() {
			this.spId = this.$route.query.spId
			uni.request({
				url: this.url + "/shop/info/" + this.spId, //仅为示例，并非真实接口地址。
				method: "GET",
				success: (res) => {
					this.cddShop = res.data.data.cddShop
					//var data = res.data.data.data
				}
			});
		},
		methods: {
			//加入购物车
			joingwc(){
				var data={
					 scCount:this.number,
					 scUrId:this.urId,
					 scSpName:this.cddShop.spName,
					 scSpId:parseInt(this.cddShop.spId)
				}
				
				uni.request({
					url:`${this.url}/shoppingcart/save`,
					method:'POST',
					data:data,
					success: ({data}) => {
						if(data.code==200){
							 //加入购物车成功
							 uni.showToast({
							 	title: data.message + "快去购物车支付把!"
							 })
						}
					}
				})
			},
			jiaf() {
				if (this.number == 10) {
					this.number = 10
				} else {
					this.number = this.number + 1
				}

			},
			jief() {
				if (this.number > 1) {
					this.number = this.number - 1
				} else {
					this.number = 1
				}
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			tzorder() {
				uni.switchTab({
					url: "../my/my"
				})
			},

			xz(index) {
				this.indexs = index
				this.price = this.prices[index]
			}
		}
	}
</script>

<style scoped>
	.dibu-class-right-button {
		position: absolute;
		float: left;
		right: 0;
		width: 300rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 20px;
		color: #FFFFFF;
		background: linear-gradient(#5555ff, #55aaff);
	}

	.dibu-class-left-button {
		position: relative;
		float: left;
		width: 300rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 20px;
		color: #FFFFFF;
		background: linear-gradient(#5555ff, #55aaff);
	}

	.dibu-class {
		position: relative;
		width: 90%;
		left: 5%;
		float: left;
		height: 50px;
	}

	.no {
		opacity: 0.5;
	}

	.jia-class text {
		position: relative;
		line-height: 50rpx;
		font-size: 20px;
		color: #333333;
	}

	.jia-class {
		position: relative;
		float: left;
		width: 50rpx;
		left: 10%;
		border-radius: 2px;
		height: 50rpx;
		background-color: #e5e5e5;
	}

	.nuber {
		position: relative;
		float: left;
		width: 50rpx;
		height: 50rpx;
		top: 20%;
		left: 5%;
	}

	.jie-class spne {
		position: relative;
		width: 45%;
		height: 5rpx;
		left: 28%;
		top: 50%;
		background-color: #333333;
	}

	.jie-class {
		display: flex;
		position: relative;
		width: 50rpx;
		height: 50rpx;
		font-size: 5px;
		border-radius: 2px;
		text-align: center;
		line-height: 50rpx;
		color: #b4b4b4;
		float: left;
		background-color: #e5e5e5;
	}

	.rigth {
		position: absolute;
		right: 0;
		width: 35%;
		height: 20px;
		float: left;
	}

	.number-div spane {
		position: absolute;
		left: 5%;
		font-size: 13px;
		font-weight: 700;
	}

	.number-div {
		position: relative;
		right: 0%;
		height: 40px;
		bottom: 230rpx;
	}

	.box-onm-rigt-wz {
		position: relative;
		top: 10rpx;
	}

	.box-one-text-wz text {
		color: #090909;
		font-size: 15px;
		margin-left: 10rpx;
	}

	.box-one-text-wz {
		color: #c5c5c5;
		font-size: 10px;

	}

	.box-one-peices text {
		font-size: 25px;
	}

	.box-one-peices {
		position: relative;
		font-weight: 700;
		color: red;
		font-size: 12px;
		right: 20%;
	}

	.box-onm-right {
		position: absolute;
		left: 40%;
		top: 10%;
	}

	.box-one-img {
		position: relative;
		height: 30%;
		width: 30%;
		top: 20rpx;
		border-radius: 50%;
		border: 3px solid #ececec;
		float: left;
	}

	.butom-ggcans {
		position: relative;
		bottom: 320rpx;
	}

	.butom-ggcans span {
		position: relative;
		color: #060606;
		font-size: 15px;
	}

	.box-one {
		position: relative;
		width: 80%;
		left: 10%;
		height: 600rpx;

	}

	.box-div {
		position: relative;
		width: 100%;
		height: 100%;
	}

	/* 上面是弹窗样式 */

	.input-div {
		background-color: #f8f8f7;
		height: 50px;
		border-radius: 5px 5px 5px 5px;
	}

	.zhanghao-class {
		position: relative;
		left: 5%;
		width: 90%;
		height: 150px;
	}

	.xz-doas {

		border: 1px solid red;
	}

	.xz-ono {
		background-color: #f8f8f7;
		color: #333333;
	}

	.prcie-class {
		position: relative;
		top: 40%;
	}

	.xz-div {
		margin-top: 10px;
		position: relative;
		text-align: center;
		width: 30%;
		margin-left: 3%;
		height: 100px;
		float: left;
		border-radius: 5px 5px 5px 5px;
	}

	.mian-e-class span {
		position: absolute;
		top: -15px;
		font-size: 10px;
		font-weight: 100;
	}

	.mian-e-class {
		position: relative;
		left: 5%;
		width: 90%;
		top: 30px;
		height: 380px;
	}

	.img-shop {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 18px;

	}

	.shop-nam-class text {
		position: relative;
		top: 20%;
	}

	.shop-nam-class {
		top: 5px;
		position: relative;
		color: red;
		text-align: center;
		width: 100px;
		height: 40px;
		border-radius: 5px 5px 5px 5px;
		border: 1px solid red;
		background-color: #faefed;

	}

	.shop-div span {
		position: relative;
		font-size: 12px;
		font-weight: 600;
		bottom: 10rpx;
	}

	.shop-div {
		position: relative;
		width: 20%;
		left: 5%;
	}

	.img-bq-dec {
		position: absolute;
		width: 90%;
		left: 5%;
		bottom: 15%;
	}

	.zchong-class {
		position: relative;
		width: 100px;
		font-size: 10px;
		left: 4%;
		bottom: 5px;
		color: #ff0100;
		background-color: #fadcda;
	}

	.price-class {
		position: relative;
		left: 5%;
		color: red;
		font-size: 25px;
		;
	}

	.dy-class-wz {
		position: relative;
		left: 5%;
		font-size: 25px;
		;
	}

	.bq-class-div {
		position: relative;
		width: 90%;
		left: 5%;
		border-radius: 10px;
		-webkit-box-shadow: 0 0 5px rgba(234, 234, 234, 1.0);
		bottom: 20px;
		background-color: #ffffff;
		height: 100px;
		;
	}

	.img-div-class {
		position: relative;
	}

	.body-class {
		position: relative;
		width: 100%;
	}

	.img-class {
		position: relative;
		background-size: 100%;
		height: 240px;
		width: 100%;
	}
</style>
